<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:pm="http://primefaces.org/mobile">

<f:view renderKitId="PRIMEFACES_MOBILE" />

<h:head>
	<link type="text/css" rel="stylesheet"
		href="#{request.contextPath}/javax.faces.resource/rating/rating.css.jsf?ln=primefaces" />
	<script type="text/javascript"
		src="#{request.contextPath}/javax.faces.resource/rating/rating.js.jsf?ln=primefaces" />
	<link rel="stylesheet"
		href="#{request.contextPath}/resources/css/bootstrap.css" />
	<link rel="stylesheet"
		href="#{request.contextPath}/resources/css/hotellie.css" />
	<link rel="stylesheet"
		href="#{request.contextPath}/resources/css/font-awesome.css" />
	<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed'
		rel='stylesheet' type='text/css' />
	<script src="http://maps.google.com/maps/api/js?sensor=false"
		type="text/javascript"></script>

</h:head>

<h:body>

	<script>
    
    
    </script>

	<style>
.ui-accordion .ui-accordion-header .ui-icon {
	margin-top: -8px;
	position: absolute;
	right: 0.5em;
	top: 50%;
}

.ui-listview>.ui-li-static, .ui-listview>li p {
	white-space: normal;
}

.ui-listview {
	margin-top: 5.2em !important;
}

.headerRow, .hmsHeader {
	margin-bottom: 0em !important;
}

.ui-panel {
	top: none !important;
}
</style>


	<pm:page id="hotelsListId">
		<pm:content>
			<h:form id="main">
				<script type="text/javascript">
          
            var flagStyle = true;
           
	       	$(function(){
	      		$(document).scroll(function() {
	      			var height = $(window).scrollTop();
					var some_number=10;
	      		    if(height  == 0) {
	      		    	$('.festivals').css({ top: 'inherit' });
	      		    }else{
	      		    	if(!flagStyle){
	      		    	  $('.festivals').css({ top: '0' });
	      		    	} else{
	      		    		flagStyle = false;
	      		    	}
	          		}
	      		});
	        });
	       	
	       	function makeFlagTrue(){
	       	    flagStyle = true;
	       	}
	       	
	      	       	
          </script>


				<div class="row headerRow">
					<div class="col-xs-2">
						<a href="#panel-1" data-role="button" data-icon="bars"
							data-iconpos="notext" data-inline="true"></a>
						<div data-role="panel" id="panel-1" data-display="overlay">
							<ul data-role="listview" id="listview-1">
								<li><a
									href="${pageContext.request.contextPath}/hms/index.xhtml">Home</a></li>
								<li><a href="item2.html">Deals</a></li>
								<li><a href="item2.html">Recently viewed Hotels</a></li>
								<li><a href="item2.html">Recently viewed Deals</a></li>
								<li><a href="item3.html">Recent searches</a></li>
								<li><a href="about.xhtml">About</a></li>
								<li><a
									href="${pageContext.request.contextPath}/hms/map/map.xhtml">Map</a></li>
								<c:if test="${signInUserView.userLoggedIn}">
									<li><a
										href="#{request.contextPath}/user/userDetails.xhtml">Profile</a></li>
									<li><a
										href="#{request.contextPath}/user/changePassword.xhtml">Change
											Password</a></li>
									<li><h:commandLink action="#{signInUserView.logout()}"
											value="Longout" /></li>
								</c:if>
							</ul>
						</div>
					</div>
					<div class="col-xs-3">
						<p:commandLink action="/index.xhtml?faces-redirect=true">
							<h3>Hotellie</h3>
						</p:commandLink>
					</div>
					<div class="col-xs-7">
						<p:link styleClass="fa fa-sort"
							outcome="pm:sortPage?transition=flip" />
						<p:link styleClass="fa fa-filter"
							outcome="pm:filterPage?transition=flip" />
						<p:link styleClass="fa fa-search"
							outcome="pm:search?transition=flip" />

					</div>
				</div>

				<p:dialog header="Events" widgetVar="dlg1" showEffect="pop"
					style="margin-left:-1.3em;">

					<p:dataGrid id="cars" var="eventvar"
						value="#{eventListProducer.getEventList(searchView.searchBean.placeBean.placeName)}"
						columns="1" paginator="false">

						<p:panel header="#{eventvar.eventName}" style="text-align:center">
							<h:panelGrid columns="1" style="width:100%">
								<p:graphicImage url="#{eventvar.imageName}" width="100"
									height="50" />
								<h:panelGrid columns="4" style="width:100%;margin-top:1em;">
									<h:outputText value="Date:"
										style="font-weight:bold;padding-right: 0.1em;" />
									<h:outputText value="#{eventvar.eventSchedule.fromDate}"
										style="padding-right: 0.3em;">
										<f:convertDateTime pattern="MM/dd/yyyy" />
									</h:outputText>
									<h:outputText value="-" />
									<h:outputText value="#{eventvar.eventSchedule.toDate}"
										style="padding-left: 0.3em;">
										<f:convertDateTime pattern="MM/dd/yyyy" />
									</h:outputText>
								</h:panelGrid>
							</h:panelGrid>
						</p:panel>

					</p:dataGrid>


				</p:dialog>

				<div id="festivalDiv" class="row festivals"
					onclick="PF('dlg1').show();">
					<div class="col-xs-12">
						<h5>Best Deals on below events</h5>
						<ui:repeat var="image"
							value="#{eventListProducer.getEventList(searchView.searchBean.placeBean.placeName)}">
							<img src="#{image.imageName}" alt="..." />
						</ui:repeat>

					</div>
				</div>
				<pm:content>
					<p:gmap id="gmap" center="37.59382,-122.36427"
						zoom="8" type="ROADMAP" model="#{mapView.mapModel}"
						style="width:100%;height:30em">
						<p:ajax event="overlaySelect"
							listener="#{mapView.onMarkerSelect}" />
						<p:gmapInfoWindow id="infoWindow">
							<h:outputText value="#{mapView.marker.title}" />
							<h:panelGrid columns="2">
								<img src="#{mapView.marker.data}" width="80" />
								<h:panelGrid style="margin-left: 1em;text-align: center;">
									<h:outputLabel value="Hot Deal" style="color:red"/>
									<h:outputLabel value="Price:$70" style="color:green"/>
									<p:commandLink value="Buy" actionListener="#{searchView.gotoViewDeal(searchView.getHotel(mapView.marker.getLatlng()))}" 
										update=":dealView" oncomplete="PrimeFaces.Mobile.navigate('#dealView',{transition:'flip'});"  
										styleClass="btn btn-success" style="padding: 4px 8px;"/>
								</h:panelGrid>
							</h:panelGrid>	
						</p:gmapInfoWindow>
					</p:gmap>
				</pm:content>
			</h:form>
		</pm:content>
	</pm:page>






<pm:page id="dealView" lazy="true" >
               <pm:header title="#{dealView.dealData.deal.dealName}" swatch="b" styleClass="hmsHeader">
                    <p:button outcome="pm:hotelsListId?transition=flip"  value="Back" styleClass="ui-btn-left ui-btn-inline" onclick="makeFlagTrue()"/>
               </pm:header>
               
                 <pm:content>
            <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'/>
          
                
                <h:form id="main">
                 <p:panel styleClass="noHeader hotelFullView">     
                    <p:outputPanel id="viewDealId" >
                            <p:commandLink value="Add to watch list" style="float:right" >
                            </p:commandLink>
                            <div class="row">
                                <div class="thumbnail right-caption col-xs-12 fullView">
                                    <div class="boxHeader">
                                        <h:outputLabel value="#{dealView.dealData.hotel.name}" styleClass="offer"/>
                                        <h:outputLabel value="20 days left" styleClass="daysLeft"/>
                                    </div>
                                     <div class="row">
                                        <div class="col-xs-6" style="padding:0">
                                            <img class="col-xs-12" src="#{dealView.dealData.hotel.hotelImage.filePath}" alt="..."/>
                                        </div>
                                        <div class="col-xs-6">
                                            <p><b>#{dealView.dealData.availableForBooking}</b> Available/   
                                            <p:commandLink  action="/deal/dealTransactions.xhtml?faces-redirect=true">                                          
                                                <b>#{dealView.dealData.alreadyBooked}</b> sold
                                            </p:commandLink>
                                            </p>
                                            <div class="facilities row">
                                                <i class="fa fa-car"></i>
                                                <i class="fa fa-wifi"></i>
                                                <i class="fa fa-cutlery"></i>
                                                <i class="fa fa-plus-square"></i>
                                            </div>
                                            <div class="star">
                                            <h:outputLabel value="#{searchView.getStar(dealView.dealData.hotel.starRating)}" escape="false"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <h:outputLabel value="Offer Details:" />
                                        <div class="col-xs-1"></div>
                                        <div class="col-xs-9">
                                            <h:outputLabel value="#{dealView.liveDealCriterionsinHTML}" escape="false"/>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-7 pull-right">
                                            <h4 style="display:inline">Price:</h4>
                                            <span class="del">
                                                <p:outputPanel rendered="#{dealView.dealData.currentPrice ne dealView.dealData.originalPrice}" autoUpdate="true"><h3 style="display:inline">$#{dealView.dealData.originalPrice}</h3></p:outputPanel>
                                            </span>
                                            <div>
                                                <p:outputPanel rendered="#{dealView.dealData.currentPrice ne dealView.dealData.originalPrice}" autoUpdate="true"><h4 style="display:inline">After #{dealView.dealData.afterDiscount}%:</h4></p:outputPanel>
                                                <h3 class="cost" style="display:inline">$#{dealView.dealData.currentPrice}</h3>/ROOM
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-xs-8">
                                            <pm:field>
                                                <p:outputLabel for="numRooms" value="No of Rooms" style="width: 50%;float: left;"/>
                                                <p:selectOneMenu id="numRooms" value="#{dealView.dealData.noOfRooms}">
                                                     <f:selectItems value="#{dealView.availableRooms}" />  
                                                     <p:ajax update="main" listener="#{dealView.fireNoOfRoomChangedAction()}"></p:ajax>
                                                </p:selectOneMenu>
                                            </pm:field>
                                        </div>
                                        <div class="col-xs-4" style="padding:0">
                                            <p:commandLink value="Buy" styleClass="btn btn-success" disabled="#{not searchView.dealView.buyButtonEnabled}"  action="#{searchView.buyAction()}" ajax="false" style="margin: 0.5em;padding: .9em 1.5em;"/>
                                        </div>
                                    </div>
                                       <div class="row">
                                         <div style="margin-left:15px">
                                            Total Cost - $ #{searchView.dealView.dealData.totalCost} for #{searchView.dealView.dealData.totalDays} nights
                                         </div>
                                       </div>
                                </div>
                            </div>
                     </p:outputPanel> 
                  </p:panel>
                </h:form>
            </pm:content>
            
           </pm:page>
</h:body>

</html>